<template>
  <section class="tool-wrap">
    <h1>RPX / PX 转换</h1>

    <div class="card">
      <div class="row">
        <div class="field">
          <label>设备宽度（px）</label>
          <input type="number" v-model.number="deviceWidth" />
        </div>
        <div class="field">
          <label>设计基准宽度（rpx 基准，默认 750）</label>
          <input type="number" v-model.number="baseWidth" />
        </div>
      </div>

      <div class="row">
        <div class="field">
          <label>RPX 值</label>
          <input type="number" v-model.number="rpxValue" placeholder="输入 rpx 数值" />
        </div>
        <div class="field">
          <label>PX 值</label>
          <input type="number" v-model.number="pxValue" placeholder="输入 px 数值" />
        </div>
      </div>

      <div class="controls">
        <button class="btn btn-primary" @click="rpxToPx">rpx → px</button>
        <button class="btn btn-primary" @click="pxToRpx">px → rpx</button>
      </div>
    </div>

    <div class="card">
      <label>整段样式批量转换：</label>
      <textarea class="code-input" rows="10" v-model="cssInput" placeholder=".box { width: 150rpx; margin: 20px; }"></textarea>
      <div class="row">
        <div class="field">
          <label>方向</label>
          <select v-model="direction">
            <option value="rpx-to-px">rpx → px</option>
            <option value="px-to-rpx">px → rpx</option>
          </select>
        </div>
        <div class="field">
          <label>&nbsp;</label>
          <button class="btn btn-primary" @click="convertCss">转换整段</button>
        </div>
      </div>

      <label>转换结果：</label>
      <pre class="code-output">{{ cssOutput }}</pre>
      <div class="controls">
        <button class="btn btn-success" @click="copyCss">复制结果</button>
        <button class="btn btn-danger" @click="clearCss">清空</button>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useUiStore } from '@/stores/ui'

const ui = useUiStore()

const deviceWidth = ref(375)
const baseWidth = ref(750)
const rpxValue = ref('')
const pxValue = ref('')

const cssInput = ref('')
const cssOutput = ref('')
const direction = ref('rpx-to-px')

// onMounted(() => {
//   if (typeof window !== 'undefined' && window.innerWidth) {
//     deviceWidth.value = window.innerWidth
//   }
// })

function rpxToPx() {
  const r = parseFloat(rpxValue.value)
  if (isNaN(r)) { ui.showToast('请输入有效的 rpx 数值', 'error'); return }
  const px = r * deviceWidth.value / baseWidth.value
  pxValue.value = Number(px.toFixed(4))
  ui.showToast('转换成功：' + pxValue.value + 'px', 'success')
}

function pxToRpx() {
  const p = parseFloat(pxValue.value)
  if (isNaN(p)) { ui.showToast('请输入有效的 px 数值', 'error'); return }
  const rpx = p * baseWidth.value / deviceWidth.value
  rpxValue.value = Number(rpx.toFixed(4))
  ui.showToast('转换成功：' + rpxValue.value + 'rpx', 'success')
}

function convertCss() {
  const text = cssInput.value || ''
  if (!text.trim()) { ui.showToast('请输入样式文本', 'error'); return }
  let out = text
  if (direction.value === 'rpx-to-px') {
    out = out.replace(/(-?\d*\.?\d+)\s*rpx\b/gi, (_, n) => {
      const px = parseFloat(n) * deviceWidth.value / baseWidth.value
      return Number(px.toFixed(4)) + 'px'
    })
  } else {
    out = out.replace(/(-?\d*\.?\d+)\s*px\b/gi, (_, n) => {
      const rpx = parseFloat(n) * baseWidth.value / deviceWidth.value
      return Number(rpx.toFixed(4)) + 'rpx'
    })
  }
  cssOutput.value = out
  ui.showToast('批量转换完成', 'success')
}

async function copyCss() {
  if (!cssOutput.value) { ui.showToast('没有内容可复制', 'error'); return }
  try {
    await navigator.clipboard.writeText(cssOutput.value)
    ui.showToast('已复制到剪贴板！', 'success')
  } catch (e) {
    ui.showToast('复制失败：' + e.message, 'error')
  }
}

function clearCss() {
  cssInput.value = ''
  cssOutput.value = ''
}
</script>

<style scoped>
.tool-wrap { max-width: 1100px; margin: 0 auto; }
h1 { color: var(--color-primary); text-align: center; font-weight: 700; }
.card { background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-bottom: 16px; }
.row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; align-items: end; }
.field label { display: block; font-weight: 600; color: var(--color-text); margin-bottom: 6px; }
input, select { width: 100%; padding: 10px; border-radius: 10px; border: 1px solid var(--color-border); }
.field :is(input, select):focus { outline: none; border-color: var(--color-primary); box-shadow: var(--ring); }
.controls { display: flex; gap: 10px; margin-top: 10px; }
.btn { padding: 10px 16px; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: .2s; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-danger { background: var(--color-danger); color: #fff; }
.btn-success { background: var(--color-success); color: #fff; }
.code-input { width: 100%; border: 1px solid var(--color-border); border-radius: 10px; padding: 12px; font-family: 'Courier New', monospace; font-size: 14px; line-height: 1.5; background: #fff; }
.code-output { min-height: 160px; white-space: pre-wrap; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 10px; padding: 12px; font-family: 'Courier New', monospace; font-size: 14px; }
@media (max-width: 768px) { .row { grid-template-columns: 1fr; } }
</style>